<template>
	<view class="container">
		<uni-nav-bar :statusBar="true" :fixed="true" :bgImage="bgImage" title="公开课" />
		<view class="container">
			
			<view class="head flex">
				<view class="head_li" v-for="(item,index) in tab" :key="index" :class="currentIndex===index?'active':''" @click="handleTab(item,index)">{{item.name}}</view>
			</view>
			
			<!-- 搜索框 -->
			<view class="search-bar" v-if="Number(selectedType)===0">
				<input class="search-input" placeholder="搜索讲师名" v-model="seachform.teacher" v-if="Number(selectedType)===0" @input="initOffline" />
				<image mode="widthFix" class="search-img" src="/static/images/index_12.png" v-if="Number(selectedType)===0" @click="initOffline"></image>
			</view>
			<!-- 筛选栏 -->
			<view class="filter-bar" v-if="Number(selectedType)===0">
				<!-- 岗位 -->
				<view class="flex flex-1">
					<view class="xinjid">岗位：</view>
					<picker mode="selector" :range="statusOptions" @change="onStatusChange" range-key="name">
						<view class="picker"><text class="ellipsis">{{ statusOptions[selectedStatus].name }}</text>
						<uni-icons type="arrowdown"></uni-icons></view>
					</picker>
				</view>
				<!-- 课程级别 -->
				<view class="flex flex-1">
					<view class="xinjid">课程级别：</view>
					<picker mode="selector" :range="subjectOptions" @change="onSubjectChange" range-key="name">
						<view class="picker"><text class="ellipsis">{{ subjectOptions[selectedSubject].name }}</text>
						<uni-icons	type="arrowdown"></uni-icons></view>
					</picker>
				</view>
			</view>
			<!-- 筛选栏 -->
			<view class="filter-bar" v-if="Number(selectedType)===0">
				<!-- 课程状态 -->
				<view class="flex flex-1">
					<view class="xinjid">课程状态：</view>
					<picker mode="selector" :range="stateOptions" @change="onStateChange" range-key="name">
						<view class="picker"><text class="ellipsis">{{ stateOptions[selectedState].name }}</text>
						<uni-icons type="arrowdown"></uni-icons></view>
					</picker>
				</view>
				<view class="flex flex-1">
					<view class="xinjid">课程主题：</view>
					<!-- 主题--只有线下有 -->
					<picker mode="selector" :range="themeOptions" @change="onThemeChange1" range-key="name">
						<view class="picker"><text class="ellipsis">{{ themeOptions[selectedTheme].name }}</text>
						<uni-icons type="arrowdown"></uni-icons></view>
					</picker>
				</view>	
			</view>
			
			<!-- 筛选栏----线上课程 -->
			<view class="filter-bar" v-if="Number(selectedType)===1">
				<view class="flex flex-1">
					<view class="xinjid">课程分类：</view>
					<picker ref="multiselect" mode="multiSelector" :range="multiArray" @change="onMultiChange" @columnchange="onColumnChange" :key="refreshKey">
						<view class="picker" style="width: 100%; display: flex;">
							<view>{{ multiArray[0][current[0]] || '请选择' }}  {{ multiArray[1][current[1]] || '' }}</view>
						  <uni-icons type="arrowdown"></uni-icons>
						</view>
					  </picker>
				</view>
				
			</view>
			
			
			<!-- 课程数量 -->
			<view class="flex flex-between kechensh">
				<!-- <picker class="picker_te" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input" style="border: none !important;">{{date}}</view>
				</picker> -->
				<view class="course-count">共搜索到 <text>{{ courseTotal }}</text> 门课程</view>
				<view class="chonzh" @click="onreset">重置</view>
			</view>
			
			<!-- 课程列表(线上课程) -->
			<view class="course-list" v-if="Number(selectedType)===1">
				<view class="card-list">
					<view v-for="(item, idx) in onlineCourseList" :key="idx" class="card" @click="goClassDetail2(item)">
						<image :src="item.coverUrl" class="card-img" mode="aspectFill"></image>
						<view class="card-info">
							<view class="card-title">{{ item.title }}</view>
							<view class="card-desc">
								<view>章节：共{{ item.chapters }}讲</view>
								<!-- <view class="time_img1 flex"><image src="/static/images/index_13.png" class="time_img" mode="widthFix"></image>{{ item.createdAt }}</view> -->
							</view>
							<view class="card-footer">
								<text class="card-price">￥{{ item.price }}</text>
								<text class="card-hot" v-if="item.hot">HOT</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 课程列表（线下课程） -->
			<view class="course-list course-list2" v-if="Number(selectedType)===0">
				<view v-for="(item, idx) in offlineCourseList" :key="idx" class="course-item" @click="goClassDetail(item)">
					<!-- <image :src="item.img" class="card-img2" mode="aspectFill"></image> -->
					<view style="width: 100%;">
						<view class="course-title">
							<view class="zuobijia">{{ item.courseTitle }}</view>
						</view>
						<view  style="display: flex; align-items: center;justify-content: space-between;">
							<view class="course-info">
								<view class="course-infoli">
									<image src="/static/images/new07.png" class="banffa_img" mode="widthFix"></image>
									<text>{{ item.address }}</text>
								</view>
								<view class="course-infoli" style="margin-left: 16rpx;">
									<uni-icons type="calendar" color="grey" size="20"></uni-icons>
									<text>{{ item.courseTime }}</text>
								</view>
							</view>
							<view class="course-price">￥{{ item.price }}</view>
						</view>
					</view>
			
				</view>
			</view>
		</view>
		<view class="nodata" v-if="isNodata">-无更多数据-</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				tab:[
					{
						name:'线下课程',
						status:0
					},
					{
						name:'线上课程',
						status:1
					}
				],
				currentIndex:0,
				isNodata:false,//没有线下课程表示
				search: '',
				statusOptions: [{  //岗位类别 0 综合管理 1 人力资源管理岗位 2 行政岗位 3 财务岗位 4 生产岗位 5 营销岗位 6 连锁营销运营 7 银行岗位 8 保险岗位 9 采购物流 10 研发 11 国际贸易 12 电力行业 13 医药行业 14 房地产
						id:'',
						name:'全部'
					},
					{
						id:0,
						name:'综合管理'
					},
					{
						id:1,
						name:'人力资源管理岗位'
					},
					{
						id:2,
						name:'行政岗位'
					},
					{
						id:3,
						name:'财务岗位'
					},
					{
						id:4,
						name:'生产岗位'
					},
					{
						id:5,
						name:'营销岗位'
					},
					{
						id:6,
						name:'连锁营销运营'
					},
					{
						id:7,
						name:'银行岗位'
					},
					{
						id:8,
						name:'保险岗位'
					},
					{
						id:9,
						name:'采购物流'
					},
					{
						id:10,
						name:'研发'
					},
					{
						id:11,
						name:'国际贸易'
					},
					{
						id:12,
						name:'电力行业'
					},{
						id:13,
						name:'医药行业'
					},{
						id:14,
						name:'房地产'
					}],
				stateOptions: [   //课程状态0确认开课、1报名中、2筹备中
					{  
						id:'',
						name:'全部'
					},
					{
						id:0,
						name:'确认开课'
					},
					{
						id:1,
						name:'报名中'
					},
					{
						id:2,
						name:'筹备中'
					}
				], 
				subjectOptions: [ //课程级别 0初级、1中级、2高级
					{
						id:'',
						name:'全部'
					},
					{
						id:0,
						name:'初级'
					},
					{
						id:1,
						name:'中级'
					},
					{
						id:2,
						name:'高级'
					}
				],
				themeOptions: [
					{
						id:'',
						name:'全部'
					},
					{
						id:1,
						name:'通用类课题'
					},
					{
						id:2,
						name:'通用管理类课题'
					},
					{
						id:3,
						name:'领导力类课题'
					},
					{
						id:4,
						name:'思维类课题'
					},
					{
						id:5,
						name:'人力资源类课题'
					},
					{
						id:6,
						name:'销售客服类课题'
					},
					{
						id:7,
						name:'TTT-课题'
					},
					{
						id:8,
						name:'生产管理'
					},
					{
						id:9,
						name:'华为标杆课题'
					},
					{
						id:10,
						name:'采购供应链'
					},
					{
						id:11,
						name:'连锁 门店、零售类'
					},
					{
						id:12,
						name:'党政类课题'
					},
					{
						id:13,
						name:'企业出海运营管理类课题'
					},
					{
						id:14,
						name:'财务类课题'
					},
					{
						id:15,
						name:'技术类课题'
					},
					{
						id:16,
						name:'礼仪类课题'
					},
					{
						id:17,
						name:'银行培训'
					}
				],
				selectedStatus: 0,
				selectedSubject: 0,
				selectedState: 0,
				selectedType: 0, //0是线下课程，1是线上课程
				selectedSchool: 0,
				selectedTheme: 0,
				date: currentDate,
				seachform:{   //搜索条件
					page:1,
					limit:10,
					topicType:'', //课程主题（只有线下才有）
					teacher:'', //讲师
					courseStatus:'', //课程状态0确认开课、1报名中、2筹备中
					jobType:'', //岗位类别 0研发、1市场、2人力
					courseLevel:'', //课程级别 0初级、1中级、2高级
				},
				seachform2:{   //搜索条件 
					page:1,
					limit:10,
					classCategoryIds:[] //选中的分类id
				},
				offlineCourseList:[] ,//线下课程
				courseTotal:0,
				onlineCourseList:[] ,//线上课程
				dataList: [],
			  multiArray: [], // 多列数据数组
			  current: ['', ''] ,// 当前选中项的索引数组，初始化为第一项的索引
			  refreshKey:0
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getOfflineCourseListFun()
			this.getAllClassCategoryFun() //获取线上课程分类数据
		},
		methods: {
			// 切换tab（线上或者线下）
			handleTab(item,index){
				this.currentIndex = index
				this.selectedType = item.status;
				this.current = ['','']
				console.log(item.status)
				let that = this
				setTimeout(function(){
					that.initClassList();
				},500)
				this.getAllClassCategoryFun()
			},
			initClassList(){
				console.log('搜索后---执行函数')
				this.seachform.page = 1
				this.offlineCourseList = []
				this.seachform2.page = 1
				if(Number(this.selectedType)===1){
					console.log('请求--线上')
					this.initOnline();
				}else{
					console.log('请求--线下')
					this.initOffline();
				}
			},
			// 清空数据
			onreset(){
				if(Number(this.selectedType)===1){
					console.log('清空--线上')
					this.seachform2={   //搜索条件
						page:1,
						limit:10,
						classCategoryIds:[]
					}
					this.current = ['','']
					this.initOnline();
				}else{
					console.log('清空--线下')
					this.seachform={   //搜索条件
						page:1,
						limit:10,
						topicType:'', //课程主题（只有线下才有）
						teacher:'', //讲师
						courseStatus:'', //课程状态0确认开课、1报名中、2筹备中
						jobType:'', //岗位类别 0研发、1市场、2人力
						courseLevel:'', //课程级别 0初级、1中级、2高级
					},
					this.selectedSubject =this.selectedStatus=this.selectedState=this.selectedTheme= 0
					this.initOffline();
				}
			},
			onStateChange(e) {
				this.selectedState = e.detail.value;
				console.log('切换课程状态')
				console.log(this.selectedState)
				this.seachform.courseStatus = this.selectedState-1<0?'':this.selectedState-1
				this.initClassList();
			},
			onStatusChange(e) {
				this.selectedStatus = e.detail.value;
				console.log('切换岗位')
				console.log(e)
				this.seachform.jobType = this.selectedStatus-1<0?'':this.selectedStatus-1
				this.initClassList();
			},
			onSubjectChange(e) {
				this.selectedSubject = e.detail.value;
				console.log('切换课程级别')
				console.log(this.selectedSubject)
				this.seachform.courseLevel = this.selectedSubject-1<0?'':this.selectedSubject-1
				this.initClassList();
			},
			onThemeChange1(e){
				console.log('切换主题')
				this.selectedTheme = e.detail.value;
				console.log(e.detail.value)
				this.seachform.topicType = this.selectedTheme<=0?'':Number(this.selectedTheme)
				this.initClassList();
			},
			onThemeChange(e) {
				// console.log('切换主题')
				// this.selectedTheme = e.detail.value;
				// this.seachform.topicType = this.selectedStatus-1<0?'':this.selectedStatus-1
				// this.initClassList();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			// 获取线下课程列表
			getOfflineCourseListFun(){
				this.sjuRequest("/wx/offlineCourse/getOfflineCourseList", 'POST', this.seachform).then(res => {
					console.log('获取线下课程列表')
					console.log(res)
					this.offlineCourseList = this.offlineCourseList.concat(res.data.records)
					this.courseTotal = res.data.total
					 if(res.data.records.length===0){
						this.isNodata = true
					}else{
						this.isNodata = false
					}
				})
			},
			// 获取线上课程列表
			getOnlineCourseListFun(){
				this.sjuRequest("wx/onlineCourse/getOnlineCourseList", 'POST', this.seachform2).then(res => {
					console.log('获取线上课程列表')
					console.log(res)
					this.onlineCourseList = this.onlineCourseList.concat(res.data.records)
					this.courseTotal = res.data.total
					 if(res.data.records.length===0){
						this.isNodata = true
					}else{
						this.isNodata = false
					}
				})
			},
			initOffline(){
				this.seachform.page = 1
				this.offlineCourseList = []
				this.getOfflineCourseListFun()
			},
			initOnline(){
				this.seachform2.page = 1
				this.onlineCourseList = []
				this.getOnlineCourseListFun()
			},
			loadMoreDataOffline(){
				console.log('线上还是线下')
				console.log(this.selectedType)
				if(Number(this.selectedType)===0){
					console.log('请求--线下----走2')
					this.seachform.page++
					this.getOfflineCourseListFun()
				}else{
					console.log('请求--线上----走1')
					this.seachform2.page++
					this.getOnlineCourseListFun()
				}
				
			},
			// 跳转课程详情----公开课（线下课）
			goClassDetail(item) {
				console.log('跳转课程详情----公开课（线下课）')
				console.log(item)
				uni.navigateTo({
					url: '/sub_class/pages/classDetail?id='+item.id
				})
			},
			// 线上详情---
			goClassDetail2(item){
				console.log('跳转线上详情')
				console.log(item)
				uni.navigateTo({
					url: '/sub_class/pages/classDetail2?id='+item.id
				})
			},
			// 获取线上课程分类数据
			getAllClassCategoryFun(){
				let that = this
				this.sjuRequest("/wx/onlineCourse/getAllClassCategory", 'POST', this.seachform2).then(res => {
					console.log('获取线上课程分类数据')
					console.log(res)
					this.dataList = res.data
					console.log(this.dataList)
					this.initMultiArray()
				})
			},
			initMultiArray() {
			      this.multiArray = [this.dataList.map(item => item.name), []]; // 初始化时只显示第一列数据和空数组作为第二列数据占位符
					console.log('走了吗')
					console.log(this.multiArray)
					// this.current[0] = 0;
					 this.updateSecondColumn(0);
				},
			    onMultiChange(e) {
					this.seachform2.classCategoryIds = []
			      const index = e.detail.value; // 获取选中的索引数组
			      this.current = index; // 更新当前选中项的索引数组
			      // 根据第一列的选中项更新第二列的数据
			      // this.updateSecondColumn(index[0]);
				  console.log('获取最后选中的数据')
				  console.log(this.current)
				  let selectId = this.dataList[this.current[0]].child[this.current[1]].id
				  console.log('选中的id是什么')
				  console.log(selectId)
				  this.seachform2.classCategoryIds.push(selectId)
				  this.initOnline()
			    },
			    onColumnChange(e) {
			      const col = e.detail.column; // 当前变化的列索引（从0开始）
			      const index = e.detail.value; // 当前变化的列中选中的索引值（从0开始）
			      if (col === 0) { // 第一列变化，需要更新第二列数据并重置第二列的选中项为0（如果有需要的话）
			        this.updateSecondColumn(index); // 更新第二列数据，并重置第二列的选中项为0（如果有需要的话）
			        if(this.current[1]===''){
						this.current[1]=0
					}
					console.log('操作第1列')
					console.log(this.current[0],this.current[1])
					console.log(this.multiArray[0][index])
					this.current[0] = index;
					this.$nextTick(() => {
					     // this.current[1] = 0; // 重置第二列选中项为0（如果有需要的话）
						 // this.$set(this.current, index, 0);
					    });
					this.refreshKey++
					this.$forceUpdate()
					
			      } else if (col === 1) { // 第二列变化，根据业务需求处理，此处仅为示例，实际可根据需求调整逻辑。
			        // 可以根据第一列和第二列的选中项联动其他操作，例如更新第三列数据等。
					console.log('操作第2列')
					console.log(index)
					this.current[1] = index;
					this.refreshKey++
					this.$forceUpdate()
					console.log(this.current[0],this.current[1])
					// seachform2.classCategoryIds
					// this.getSecondColumn(index);
					
			      }
			    },
			    updateSecondColumn(index) { 
				  // 根据第一列的选中项更新第二列的数据和选中项索引数组的第二项值。				
			      this.multiArray[1] = this.dataList[index].child.map(item => item.name); // 更新第二列数据为选中项的子选项的标签数组。
			      // this.current[1] = 0; // 重置第二列的选中项为0（如果有需要的话）
				  // this.$set(this.current, index, 0);
				  console.log('kkkkkkkkkkk------------')
				  console.log(this.dataList[index].child.map(item => item.name))
				  console.log(this.multiArray[1])
				  this.$forceUpdate()
			    },
				getSecondColumn(index){
					console.log('第2级选择')
				}
		},
		onReachBottom() {
		    // 页面滚动到底部时触发
			console.log('页面滑动到底部')
		    this.loadMoreDataOffline();
		  },
	}
</script>

<style>
	.container {
		padding: 20rpx 10rpx;
		padding-top: 0;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		background-color: #f2f2f3;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		border: 1rpx solid #31b0e5;
	}

	.search-input {
		flex: 1;
		border-radius: 10rpx;
		padding: 10rpx;
		padding-left: 30rpx;
	}
	.search-input2{
		border: 1rpx solid #31b0e5;
	}
	.kechensh{
		display: flex;
		justify-content: space-between;
	}
	.cancel-btn {
		margin-left: 20rpx;
		color: #007aff;
		background: none;
		border: none;
	}

	.filter-bar {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.filter-bar text {
		color: #666;
	}

	.filter-bar .active {
		color: #007aff;
		border-bottom: 2rpx solid #007aff;
	}


	.filter-bar {
		display: flex;
		justify-content: space-between;
		/* background: #fff; */
		width: 100%;
		box-sizing: border-box;
		flex-wrap: wrap;
		overflow: hidden;
		gap: 20rpx; /* 子元素之间的间隔为 10px */
		/* border: 1px solid #eee; */
	}

	.picker {
		padding: 8px 6px;
		border-radius: 4px;
		margin-right: 8px;
		width: 100%;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		border: 1rpx solid #31b0e5;
		justify-content: space-between;
		width: 200rpx;
	}

	.picker text {
		display: block;
		width: 80%;
		height: 30rpx;
		overflow: hidden;
	}

	picker {
		flex: 1;
		margin-bottom: 10rpx;
		font-size: 24rpx;
	}
	.search-img {
		width: 40rpx;
		height: auto;
		margin-right: 30rpx;
	}
	.uni-input{
		font-size: 24rpx;
	}
	picker.picker_te{
		background: #31b0e5;
		color: #fff; 
		width: 33%;
		flex: inherit;
	}
	
	.course-count {
		color: #666;
		margin: 20rpx 0;
	}
	.course-count text{
		color:#31b0e5;
		font-weight: bold;
		margin: 0 10rpx;
		
	}
	
	.course-list {}
	
	.course-item {
		display: flex;
		margin-bottom: 30rpx;
	}
	
	.course-img {
		width: 120rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		background: #eee;
	}
	
	.course-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.course-title {
		font-size: 32rpx;
	}
	
	.course-learners {
		color: #999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	
	.card-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.card {
		width: 100%;
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 8rpx #eee;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.card-img {
		width: 300rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}
	
	.card-info {
		width: 360rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.card-title {
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-size: 28rpx;
		color: #111111;
		margin-bottom: 24rpx;
	}
	
	.card-desc {
		color: #888;
		font-size: 24rpx;
		margin-bottom: 24rpx;
		display: flex;
	}
	
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.card-price {
		color: #31b0e5;
		font-weight: bold;
	}
	
	.card-hot {
		background: #f00;
		color: #fff;
		border-radius: 8rpx;
		padding: 2rpx 8rpx;
		font-size: 20rpx;
	}
	
	.course-list {
		margin-bottom: 20rpx;
	}
	
	.course-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-bottom: 12rpx;
	}
	
	.course-title {
		display: block;
		margin-bottom: 20rpx;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-weight: 500;
		font-size: 30rpx;
		color: #111111;
	}
	
	.course-info {
		color: #888;
		font-size: 24rpx;
		margin: 4rpx 0;
		display: flex;
	}
	
	.course-price {
		font-weight: 500;
				    font-size: 30rpx;
				    color: #FF5245;
	}
	
	.course-infoli {
		margin-right: 10rpx;
		display: flex;
	}
	
	.padding10 {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.titleinfo {
		width: 100%;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
		padding-top: 10rpx;
		font-size: 32rpx;
	}
	
	.titleinfo_2 {
		content: '';
		background: linear-gradient(90deg, rgba(38, 182, 182, 1) 20%, rgba(38, 182, 182, .8) 60%, rgba(38, 182, 182, .1) 99%);
		height: 2rpx;
		width: 100rpx;
		display: block;
		margin-left: 20rpx;
		margin-top: 4rpx;
	}
	
	.titleinfo_1 {
		background: linear-gradient(-90deg, rgba(38, 182, 182, 1) 20%, rgba(38, 182, 182, .8) 60%, rgba(38, 182, 182, .1) 99%);
		height: 2rpx;
		width: 100rpx;
		display: block;
		margin-right: 20rpx;
	}
	
	.card-img2 {
		width: 100%;
		height: 300rpx;
		margin-bottom: 10rpx;
	}
	
	.zuobijia {
		width: 100%;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-size: 28rpx;
		color: #111111;
	}
	.time_img{
		width: 30rpx;
		height: auto;
		margin-right: 5rpx;
	}
	.time_img1{
		margin-left: 20rpx;
	}
	
	
	.course-list {
		margin-bottom: 20rpx;
	}
	
	.course-list2 .course-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-bottom: 12rpx;
	}
	

	
	.course-list2 .course-info {
		color: #888;
		font-size: 24rpx;
		margin: 4rpx 0;
		display: flex;
		flex-direction: unset;
		justify-content: end;
	}
	

	
	.course-list2 .course-infoli {
		margin-right: 10rpx;
		display: flex;
	}
	.nodata{
		width: 100%;
		text-align: center;
	}
	.head{
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #eee;
		justify-content: space-around;
		margin-bottom: 20rpx;
		padding: 20rpx 0;
		font-size: 30rpx;
	}
	.head_li.active{
		color: #31b0e5;
		font-weight: bold;
		border-bottom: 1rpx solid #31b0e5;
	}
	.lieb{
		width: 100%;
		height: auto;
	}
	.liebli{
		width: 96%;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		position: relative;
		margin-top: 20rpx;
	}
	.flex-1{
		flex: 1;
	}
	.xinjid{
		width: 130rpx;
	}
	.chonzh{
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #31b0e5;
		text-align: center;
		color: #fff;
		border-radius: 10rpx;
	}
	.banffa_img{
		width: 20rpx;
		height: auto;
		margin-right: 4rpx;
		margin-top: 5rpx;
	}
</style>